<!DOCTYPE html>
<html lang="cmn-hans">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/readmore.css">
  <title>阅读更多</title>
</head>
<body>
  <div class="container">
    <input type="checkbox" name="" id="readmore">
    <label for="readmore"></label>
    <div class="content">
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat ducimus maxime exercitationem sint illum in consequatur laboriosam consequuntur. Voluptates cum rerum neque odit est voluptatem commodi maiores dolore ipsum ad!
        Maxime repellat nemo praesentium tenetur ea ut aspernatur, necessitatibus, voluptatibus delectus possimus quibusdam excepturi non, id ratione animi repudiandae? Distinctio tenetur in iusto sit culpa, debitis animi. Similique, harum. Sequi!
        Optio voluptatem, at harum recusandae labore sed esse nobis itaque! Id beatae ea amet vitae nostrum assumenda atque quasi aperiam quae aliquam, cupiditate, cum impedit asperiores maxime ullam, officiis eum!
        Voluptatem culpa fuga laborum architecto, porro ex consequuntur sapiente soluta nihil debitis quis incidunt, hic similique nesciunt officia voluptatum reiciendis, suscipit quos. Magni
      </p>
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat ducimus maxime exercitationem sint illum in consequatur laboriosam consequuntur. Voluptates cum rerum neque odit est voluptatem commodi maiores dolore ipsum ad!
        Maxime repellat nemo praesentium tenetur ea ut aspernatur, necessitatibus, voluptatibus delectus possimus quibusdam excepturi non, id ratione animi repudiandae? Distinctio tenetur in iusto sit culpa, debitis animi. Similique, harum. Sequi!
        Optio voluptatem, at harum recusandae labore sed esse nobis itaque! Id beatae ea amet vitae nostrum assumenda atque quasi aperiam quae aliquam, cupiditate, cum impedit asperiores maxime ullam, officiis eum!
        Voluptatem culpa fuga laborum architecto, porro ex consequuntur sapiente soluta nihil debitis quis incidunt, hic similique nesciunt officia voluptatum reiciendis, suscipit quos. Magni
      </p>
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat ducimus maxime exercitationem sint illum in consequatur laboriosam consequuntur. Voluptates cum rerum neque odit est voluptatem commodi maiores dolore ipsum ad!
        Maxime repellat nemo praesentium tenetur ea ut aspernatur, necessitatibus, voluptatibus delectus possimus quibusdam excepturi non, id ratione animi repudiandae? Distinctio tenetur in iusto sit culpa, debitis animi. Similique, harum. Sequi!
        Optio voluptatem, at harum recusandae labore sed esse nobis itaque! Id beatae ea amet vitae nostrum assumenda atque quasi aperiam quae aliquam, cupiditate, cum impedit asperiores maxime ullam, officiis eum!
        Voluptatem culpa fuga laborum architecto, porro ex consequuntur sapiente soluta nihil debitis quis incidunt, hic similique nesciunt officia voluptatum reiciendis, suscipit quos. Magni
      </p>
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat ducimus maxime exercitationem sint illum in consequatur laboriosam consequuntur. Voluptates cum rerum neque odit est voluptatem commodi maiores dolore ipsum ad!
        Maxime repellat nemo praesentium tenetur ea ut aspernatur, necessitatibus, voluptatibus delectus possimus quibusdam excepturi non, id ratione animi repudiandae? Distinctio tenetur in iusto sit culpa, debitis animi. Similique, harum. Sequi!
        Optio voluptatem, at harum recusandae labore sed esse nobis itaque! Id beatae ea amet vitae nostrum assumenda atque quasi aperiam quae aliquam, cupiditate, cum impedit asperiores maxime ullam, officiis eum!
        Voluptatem culpa fuga laborum architecto, porro ex consequuntur sapiente soluta nihil debitis quis incidunt, hic similique nesciunt officia voluptatum reiciendis, suscipit quos. Magni
      </p>
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat ducimus maxime exercitationem sint illum in consequatur laboriosam consequuntur. Voluptates cum rerum neque odit est voluptatem commodi maiores dolore ipsum ad!
        Maxime repellat nemo praesentium tenetur ea ut aspernatur, necessitatibus, voluptatibus delectus possimus quibusdam excepturi non, id ratione animi repudiandae? Distinctio tenetur in iusto sit culpa, debitis animi. Similique, harum. Sequi!
        Optio voluptatem, at harum recusandae labore sed esse nobis itaque! Id beatae ea amet vitae nostrum assumenda atque quasi aperiam quae aliquam, cupiditate, cum impedit asperiores maxime ullam, officiis eum!
        Voluptatem culpa fuga laborum architecto, porro ex consequuntur sapiente soluta nihil debitis quis incidunt, hic similique nesciunt officia voluptatum reiciendis, suscipit quos. Magni
      </p>
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat ducimus maxime exercitationem sint illum in consequatur laboriosam consequuntur. Voluptates cum rerum neque odit est voluptatem commodi maiores dolore ipsum ad!
        Maxime repellat nemo praesentium tenetur ea ut aspernatur, necessitatibus, voluptatibus delectus possimus quibusdam excepturi non, id ratione animi repudiandae? Distinctio tenetur in iusto sit culpa, debitis animi. Similique, harum. Sequi!
        Optio voluptatem, at harum recusandae labore sed esse nobis itaque! Id beatae ea amet vitae nostrum assumenda atque quasi aperiam quae aliquam, cupiditate, cum impedit asperiores maxime ullam, officiis eum!
        Voluptatem culpa fuga laborum architecto, porro ex consequuntur sapiente soluta nihil debitis quis incidunt, hic similique nesciunt officia voluptatum reiciendis, suscipit quos. Magni
      </p>
    </div>
  </div>
</body>
</html>
